<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../css/aui.css">
	<link rel="stylesheet" type="text/css" href="../css/aui-slide.css">
	<link rel="stylesheet" type="text/css" href="../css/api.css">
	<link rel="stylesheet" href="../css/common.css">
</head>
<body class="login-bg">
	<header style="position:relative;margin-top:5%;margin-left:5%;
	margin-bottom: 10%;" onclick="api.closeWin()">
      <img src="../image/left.png">
    </header>
    <!-- <div class="logo">
        <img src="../image/logo.jpg" >
    </div> -->
<div class="login-box2">
    <div class="aui-content aui-margin-t-15">
        <form action="" method="post" id="register_form">
        <ul class="aui-list aui-select-list">
            <li class="aui-list-item">
                <i class="aui-iconfont aui-icon-phone"></i>
                <div class="aui-list-item-inner">
                    <input type="text" id="mobile" placeholder="请输入手机号">
                </div>
            </li>
            <li class="aui-list-item">
                <i class="aui-iconfont aui-icon-my"></i>
                <div class="aui-list-item-inner">
                    <input type="text" id="captcha" placeholder="填写验证码">
                </div>
                <span><img alt="验证码" src="http://www.mk517.com/comm/showpic.php" tapmode onclick="this.src='http://www.mk517.com/comm/showpic.php?a='+Math.random();"/></span>
            </li>
             <li class="aui-list-item">
                <i class="aui-iconfont aui-icon-phone"></i>
                <div class="aui-list-item-inner">
                    <input type="text" id="sms" placeholder="填写短信验证码">
                </div>
                <span id='getsms' tapmode onclick="getsms()"><span id='re'></span>点击获取</span>
            </li>
            <li class="aui-list-item">
                <i class="aui-iconfont aui-icon-lock"></i>
                <div class="aui-list-item-inner">
                    <input type="password" id="password" placeholder="密码">
                </div>
            </li>
            <li class="aui-list-item">
                <i class="aui-iconfont aui-icon-lock"></i>
                <div class="aui-list-item-inner">
                    <input type="password" id="Confirm_password" placeholder="请确认密码">
                </div>
            </li>
            <li class="aui-list-item">
                <i class="aui-iconfont aui-icon-my"></i>
                <div class="aui-list-item-inner">
                    <input type="text" id="tjrid"  readonly  unselectable="on" placeholder="推荐人账号(可选)">
                </div>
            </li>
        </ul>
    </form>
    </div>
    <div class="aui-list-item-middle" style="text-align:center;margin-top:10px;">
        <label><input class="aui-radio" type="checkbox" checked=checked id="check"></label>
        <span>我已阅读并同意</span><span class="aui-text-warning">《芒客用户注册协议》</span>
    </div>
    <p>
        <div class="aui-btn aui-btn-block aui-btn-warning" id="register" style="width:80%;margin:auto;margin-top:20px;" onclick="fnRegister()">注册</div>
    </p>
</div>
</body>
<style type="text/css">
	.aui-list .aui-list-item{
		width:100%;
		margin:auto;
		display:flex;
		display:-webkit-flex;
	}
	.aui-list li div{
		margin-left:10px;
		flex:2;
	}
	.aui-list li span{
		text-align:center;
        text-align:-webkit-center;
        padding-top:6%;
		flex:1;
	}
</style>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	apiready = function() {
		var mobile = $api.byId('mobile');
		var password = $api.byId('password');
		var Confirm_password = $api.byId('Confirm_password');
		var tjrid = $api.byId('tjrid');
		var check = $api.byId('check');
		var captcha = $api.byId('captcha');
		var sms = $api.byId('sms');
		var getsms = $api.byId('getsms');
		window.getsms = function(){
			mobileValue = mobile.value;
			captchaValue = captcha.value;
			if(!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(mobileValue)){
				api.toast({
					msg:'手机号码有误',
					duration:2500,
					location:'middle'
				});
				return false;
			}
			if(captchaValue==''){
				api.toast({
					msg:'验证码不能为空',
					duration:2000
				});
				return false;
			}else if(captchaValue.length!=4){
				api.toast({
					msg:'请输入4位验证码',
					duration:2000
				});
				return false;
			}
			getsms.innerHTML = '请稍后……';
			getsms.disabled = true;
			api.ajax({
				url:'http://www.mk517.com/index.php?mod=ajax&act=before_sms',
				method:'post',
				dataType:'text',
				data:{
					values:{
						mobile:mobileValue,
						captcha:captchaValue
					}
				}
			},function(ret,err){
				if(ret==3){
					api.ajax({
						url:'http://www.mk517.com/index.php?mod=ajax&act=sendsms',
						method:'post',
						dataType:'text',
						data:{
							values:{
								mobile:mobileValue
							}
						}
					},function(ret,err){
						
						if(ret){
							api.toast({
								msg:'发送成功，请注意查收',
								duration:3000
							});
							var times = 60;
							var pos = true;
						}else{
							api.toast({
								msg:'发送失败',
								duration:2000
							});
							var times = 15;
							var pos = false;
						}
						var inia = setInterval(function(){
							if(pos){
								getsms.innerHTML = times+"秒后重发";
								getsms.style.color = '#ccc';
							}else{
								getsms.innerHTML = '发送失败'+times;
							}
							if(times<1){
								clearInterval(inia);
								getsms.disabled = false;
								getsms.innerHTML = '点击获取';
								getsms.style.color = 'black';
							}
							times--;
						},1000);
					});
				}else if(ret==1){
					api.alert({
						title:'手机号',
						msg:'已经存在',
						buttons:['知道了']
					});
					getsms.innerHTML = '点击获取';
					getsms.disabled = false;
				}else if(ret==2){
					api.alert({
						title:'验证码',
						msg:'不正确',
						buttons:['知道了']
					});
					getsms.innerHTML = '点击获取';
					getsms.disabled = false;
				}
			});
		}


		window.fnRegister = function() {

			mobileValue = mobile.value;
			captchaValue = captcha.value;
			smsValue = sms.value;
			passwordValue = password.value;
			Confirm_passwordValue = Confirm_password.value;
			tjridValue = tjrid.value;
			if (mobileValue == ''){
				api.toast({
					msg:'号码不能为空',
					duration:3000
				});
				return false;
			}
			if(!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(mobileValue)){
				api.toast({
					msg:'手机号码有误',
					duration:3000
				});
				return false;
			}
			
			if(smsValue==''){
				api.toast({
					msg:'短信验证码未输入',
					duration:3000
				});
				return false;
			}else if(smsValue.length!=6){
				api.toast({
					msg:'请输入6位数的短信验证码',
					duration:3000
				});
				return false;
			}

			if(passwordValue.length<6){
				api.toast({
					msg:'密码至少6位数',
					duration:3000
				});
				return false;
			}
			if(passwordValue!=Confirm_passwordValue){
				api.toast({
					msg:'两次输入的密码不一致',
					duration:3000
				});
				return false;
			}
			var body = {
				mobile: mobileValue,
				sms:smsValue,
				password: passwordValue,
				tjrid: tjridValue,
				token: $api.getStorage('token')
			};
			$api.toast('注册中','请稍后……',1000);

			api.ajax({
				url:'http://www.mk517.com/index.php?mod=ajax&act=check_sms',
				method:'post',
				dataType:'text',
				data:{
					values:{
						mobile:mobileValue,
						sms:smsValue
					}
				}
			},function(ret,err){
				if(!ret){
					api.toast({
						msg:'请输入正确的短信验证码',
						duration:3000
					});
					return false;
				}
				api.ajax({
					url: 'http://www.mk517.com/webApi/register.php',
					method: 'post',
					dataType: 'json',
					"headers": {
						"Content-Type": "application/json;charset=utf-8"
					},
					data: {
						body: body
					}
				}, function(ret, err) {
					if (ret) {
						 $api.setStorage('token', ret['token']);
						var token = ret['token'];
						if (ret.code == 1) {
							$api.setStorage('uid',ret.uid);
							api.alert({
								msg: ret.res,
							}, function(ret, err) {
								if (ret) {
									if (ret.buttonIndex == 1) {
										api.sendEvent({
											name: 'login',
											extra: {
												mobile: mobileValue,
												token: token
											}
										});
										api.closeWin();
									}
								} else {
									alert(JSON.stringify('ERROR1'));
								}
							});
						} else if(ret.code==-1) {
							api.alert({
								msg: ret.res,
							});

						}else if(ret.code==-2){
							api.toast({
								msg:ret.res,
								duration:1500
							});
						}else if(ret.code==-3){
							api.toast({
								msg:ret.res,
								duration:1500
							});
						}
					} else {
						 alert(JSON.stringify('ERROR2'));
					}
				});
			});
			
		}
	}
</script>

</html>
